<template>
  <view class="main">
    <view class="top">
      <view class="back"></view>

      <view class="header"
            ref="header"
      >
        <view :style="{height: statusBarHeight + 'px'}"></view>
        <view class="header-title">
          <view
              @click="backRouter"
              style="position: absolute;top: 25rpx;left: 20rpx">
            <u-icon
                name="arrow-left"
                color="#fff" size="34"
            ></u-icon>
          </view>
          技能等级详情
        </view>
      </view>

      <view :style="{height: statusBarHeight + 'px'}"></view>
      <view style="height: 44px"></view>

      <view class="header-icon">
        <view class="level-icon">
          <image
              :src="$kt.file.visit(bodyData.levelIcon)"
              mode="aspectFit"
              style="width: 150rpx; height:  150rpx"
          ></image>
          <view class="level-name">{{ bodyData.levelName }}</view>
        </view>
      </view>

      <view v-if="!bodyData.isHas" style="text-align: center;border: 1px solid white;padding: 10rpx;margin: 0 60rpx 15rpx 60rpx;color: white">
        未获取
      </view>
      <view v-else style="text-align: center;border: 1px solid white;padding: 10rpx;margin: 0 60rpx 15rpx 60rpx;color: white">
        已获取
      </view>
      <view style="height: 20rpx">

      </view>
    </view>
    <view class="bom" style="margin-bottom: 0">
      <!--申请状态 红色字体-->
      <view class="apply-status" :style="{color : isCanApply?'#8ed876':''}">状态 : {{isCanApply?'可申请':'不可申请'}}</view>
      <view style="height: 30rpx"></view>
      <!--申请要求  -->
      <view class="flex-box">
        <view style="font-weight: bold;font-size: 26rpx">
          申请要求:
        </view>
        <view class="flex-box">
          <image src="@/static/no.png" style="width: 20rpx;height: 20rpx;margin-left: 40rpx"></image>
          <view style="color: #9b9b9b;font-size: 22rpx;margin-left: 20rpx">不符合条件</view>
        </view>
        <view class="flex-box">
          <image src="@/static/yes.png" style="width: 20rpx;height: 20rpx;margin-left: 40rpx"></image>
          <view style="color: #9b9b9b;font-size: 22rpx;margin-left: 20rpx">符合条件</view>
        </view>
      </view>
      <!-- 满足以下其中一个条件即可.     -->
      <view style="color: #1EC4B4;font-size: 25rpx;margin-top: 20rpx">
        满足以下其中一个条件即可.
      </view>
    </view>

    <view style="height: 20rpx"></view>
    <u-tabs
        :list="bodyData.conditionList"
        :current="currentTab"
        lineColor="#23ad9b"
        line-width="80rpx"
        line-height="4rpx"
        :scrollable="true"
        :activeStyle="{
            fs: '14rpx',
            color: '#000000',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#949494',
            transform: 'scale(1)'
        }"
        itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 70rpx;"
        @click="changeTab"

    >
    </u-tabs>

    <view style="height: 20rpx"></view>

    <!--内容 -->
    <view>
      <view v-for="(item,index) in selectCondition">
        <u-row v-if="selectCondition.type=='age'||
                     selectCondition.type=='workYears'||
                     selectCondition.type=='educationLevel'" gutter="10">

          <!--是否符合条件 图标-->
          <u-col span="1">
            <image v-if="!item.isHas" src="@/static/no.png" class="content-img"></image>
            <image v-else  src="@/static/yes.png"  class="content-img"></image>
          </u-col>
          <!--条件类别 -->
          <u-col span="3">
            <view class="content-type">{{ item.name }}</view>
          </u-col>
          <!--条件内容-->
          <u-col span="8">
            <view class="content-value">{{ item.value }}</view>
          </u-col>
        </u-row>
        <view v-else>
          <u-row gutter="10">
            <!--是否符合条件 图标-->
            <u-col span="1">
              <image v-if="!item.isHas" src="@/static/no.png" class="content-img"></image>
              <image v-else  src="@/static/yes.png"  class="content-img"></image>
            </u-col>
            <!--条件类别 -->
            <u-col span="11">
              <view class="content-type">{{ item.name }}</view>
            </u-col>
          </u-row>
          <u-row gutter="10" style="text-align: right">
            <u-col span="1">

            </u-col>
            <u-col span="10">
              <view class="content-value">
                {{ item.value }}
              </view>
            </u-col>
          </u-row>
        </view>
        <view style="height: 20rpx"></view>

      </view>
<!--      &lt;!&ndash; 年龄要求     &ndash;&gt;-->
<!--      <u-row gutter="10">-->
<!--        &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--        <u-col span="1">-->
<!--          <image src="@/static/no.png" class="content-img"></image>-->
<!--          &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--        <u-col span="3">-->
<!--          <view class="content-type">年龄要求</view>-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件内容&ndash;&gt;-->
<!--        <u-col span="8">-->
<!--          <view class="content-value">16周岁以上</view>-->
<!--        </u-col>-->
<!--      </u-row>-->
<!--      <view style="height: 20rpx"></view>-->
<!--      &lt;!&ndash; 学历要求     &ndash;&gt;-->
<!--      <u-row gutter="10">-->
<!--        &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--        <u-col span="1">-->
<!--          <image src="@/static/no.png" class="content-img"></image>-->
<!--          &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--        <u-col span="3">-->
<!--          <view class="content-type">学历要求</view>-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件内容&ndash;&gt;-->
<!--        <u-col span="8">-->
<!--          <view class="content-value">本科及以上</view>-->
<!--        </u-col>-->
<!--      </u-row>-->
<!--      <view style="height: 20rpx"></view>-->
<!--      &lt;!&ndash; 入职年限要求  &ndash;&gt;-->
<!--      <u-row gutter="10">-->
<!--        &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--        <u-col span="1">-->
<!--          <image src="@/static/no.png" class="content-img"></image>-->
<!--          &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--        <u-col span="3">-->
<!--          <view class="content-type">入职年限要求</view>-->
<!--        </u-col>-->
<!--        &lt;!&ndash;条件内容&ndash;&gt;-->
<!--        <u-col span="8">-->
<!--          <view class="content-value">3年及以上</view>-->
<!--        </u-col>-->
<!--      </u-row>-->
<!--      <view style="height: 20rpx"></view>-->
<!--      &lt;!&ndash;职称要求&ndash;&gt;-->
<!--      <view>-->
<!--        <u-row gutter="10">-->
<!--          &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--          <u-col span="1">-->
<!--            <image src="@/static/no.png" class="content-img"></image>-->
<!--            &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--          </u-col>-->
<!--          &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--          <u-col span="11">-->
<!--            <view class="content-type">职称要求</view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--        <u-row gutter="10" style="text-align: right">-->
<!--          <u-col span="1">-->

<!--          </u-col>-->
<!--          <u-col span="10">-->
<!--            <view class="content-value">-->
<!--              取得本职业或相关职业五级/初级工职业资格（职业技能等级）证书后，累计从事本职业或相关职业工作满3年。-->
<!--            </view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--      </view>-->
<!--      <view style="height: 20rpx"></view>-->
<!--      &lt;!&ndash;技能要求&ndash;&gt;-->
<!--      <view>-->
<!--        <u-row gutter="10">-->
<!--          &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--          <u-col span="1">-->
<!--            <image src="@/static/no.png" class="content-img"></image>-->
<!--            &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--          </u-col>-->
<!--          &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--          <u-col span="11">-->
<!--            <view class="content-type">技能要求</view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--        <u-row gutter="10" style="text-align: right">-->
<!--          <u-col span="1">-->

<!--          </u-col>-->
<!--          <u-col span="10">-->
<!--            <view class="content-value">-->
<!--              1.具有本职业或相关职业五级/初级工职业资格（职业技能等级）证书。-->
<!--              2.累计从事本职业或相关职业工作满3年。-->
<!--              3.掌握本职业或相关职业工作所需的基本技能和知识。-->
<!--              4.熟悉本职业或相关职业工作的操作规程、工作流程和安全操作规范。-->
<!--              5.具有较强的组织管理、协调沟通、技术培训、质量控制、安全生产等能力。-->
<!--            </view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--      </view>-->
<!--      <view style="height: 20rpx"></view>-->
<!--      &lt;!&ndash;备注&ndash;&gt;-->
<!--      <view>-->
<!--        <u-row gutter="10">-->
<!--          &lt;!&ndash;是否符合条件 图标&ndash;&gt;-->
<!--          <u-col span="1">-->
<!--            <image src="@/static/no.png" class="content-img"></image>-->
<!--            &lt;!&ndash;          <image src="@/static/yes.png"  class="content-img"></image>&ndash;&gt;-->
<!--          </u-col>-->
<!--          &lt;!&ndash;条件类别 &ndash;&gt;-->
<!--          <u-col span="11">-->
<!--            <view class="content-type">备注</view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--        <u-row gutter="10" style="text-align: right">-->
<!--          <u-col span="1">-->

<!--          </u-col>-->
<!--          <u-col span="10">-->
<!--            <view class="content-value">-->
<!--              1.具有本职业或相关职业五级/初级工职业资格（职业技能等级）证书。-->
<!--              2.累计从事本职业或相关职业工作满3年。-->
<!--              3.掌握本职业或相关职业工作所需的基本技能和知识。-->
<!--              4.熟悉本职业或相关职业工作的操作规程、工作流程和安全操作规范。-->
<!--              5.具有较强的组织管理、协调沟通、技术培训、质量控制、安全生产等能力。-->
<!--            </view>-->
<!--          </u-col>-->
<!--        </u-row>-->
<!--      </view>-->
<!--      <view style="height: 20rpx"></view>-->
    </view>
  </view>
</template>

<script>
import UviewUi from "../../../uni_modules/uview-ui/components/uview-ui/uview-ui.vue";
import URow from "../../../uni_modules/uview-ui/components/u-row/u-row.vue";
import UCol from "../../../uni_modules/uview-ui/components/u-col/u-col.vue";
import UImage from "../../../uni_modules/uview-ui/components/u--image/u--image.vue";
import UIcon from "../../../uni_modules/uview-ui/components/u-icon/u-icon.vue";

export default {
  components: {UIcon, UImage, UCol, URow, UviewUi},
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,

      // 头部高度
      headerHeight: 0,
      current: 0,
      skillLevelId: 0,
      //是否可以申请
      isCanApply: false,
      bodyData: {
        isHas: true,
        levelIcon: 573919558975493,
        levelName: "初级工",
        conditionList: [
          {
            name: '条件1',
            //条件内容
            content: [
              {
                isHas: true,
                currentCondition : '',
                //条件类型
                type: 'age',
                name: '年龄要求',
                //条件内容
                value: '年满16周岁，拟从事本职业或相关职业工作。'
              }
            ]
          },
          {
            name: '条件2',
            badge: {
              isDot: true
            }
          },
          {
            name: '条件3',
          },
          {
            name: '条件4',
          }, {
            name: '条件5',
          }, {
            name: '条件6',
          }
        ],

      },
      selectCondition: {},
      currentTab: 0
    };
  },
  onLoad(options) {
    this.skillLevelId = options.id;
    console.log("this.skillLevelId", this.skillLevelId)
    this.getCondition();
  },
  mounted() {
    // 设置状态颜色为白色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
    });
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取头部高度
    uni.createSelectorQuery().in(this).select('.header').boundingClientRect((data) => {
      this.headerHeight = data.height;
    }).exec();

  },
  methods: {
    changeTab(e) {
      console.log("e", e)
      this.currentTab = e.index;
      this.selectCondition = this.bodyData.conditionList[e.index].content;
    },
    /**
     * 获取职称等级的条件
     * @param e
     */
    getCondition() {
      // /**
      // * 根据条件查询技能等级需要的条件
      //   */
      //   @RequestMapping("/getCondition")
      //   public RestResult<List<GwSkillLevelCondition>> getCondition(@RequestParam("param") GwSkillLevelCondition param) {
      //     return RestResult.success(levelConditionService.getList(param), "getSuccess", "获取成功");
      //   }

      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/skillLevel/getCondition",
        data: {
          skillLevelId: this.skillLevelId
        },
        stateSuccess: (res) => {
          console.log("获取职称等级的条件", res.data)
          this.bodyData = res.data;
          this.currentTab = 0;
          this.selectCondition = this.bodyData.conditionList[0].content;

          //遍历conditionList找到selectCondition。content每个条件的isHas为true的条件添加badge: {
        //   isDot: true
        // }
          this.bodyData.conditionList.forEach((item) => {
            let isDot = true;
            item.content.forEach((item) => {
              if (!item.isHas) {
                isDot = false;
              }
            });
            if (isDot) {
              item.badge = {
                isDot: true
              }
              this.isCanApply = true;
            }
          });
          uni.hideLoading();
        }
      });

    },
    confirm(e) {
      console.log("e,e", e);
    },
    backRouter() {
      console.log("返回")
      //返回上一页
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>

.top {
  //颜色渐变 左上角到右下角 #0B8D80
  background: linear-gradient(45deg, #0B8D80, #2db9a5);

}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  color: #ffffff;

}

.content-img {
  width: 20rpx;
  height: 20rpx;
  margin-left: 40rpx
}

.content-type {
  color: #000000;
  font-size: 26rpx;
  margin-left: 20rpx
}

.content-value {
  color: #7f7f7f;
  font-size: 26rpx;
  margin-left: 20rpx
}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}


.header-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
  position: relative;
}

.header-icon {
  width: 100%;
  height: 250rpx;
  text-align: center;
  padding-top: 30rpx;
}

.level-icon {
  width: 160rpx;
  height: 160rpx;
  background-color: #ffffff;
  border-radius: 50%;
  margin: auto;
}

.level-name {
  font-size: 36rpx;
  color: #ffffff;
  margin-top: 20rpx;
}

.bom {
  padding: 30rpx 30rpx 0 30rpx;
  text-align: left;
}

.apply-status {
  font-size: 28rpx;
  color: #ff0000;
  text-align: center;
}

.flex-box {
  display: flex;
  align-items: center;
}


</style>
